<template>
	<page-meta>
		<navigation-bar :subtitle-color="nbFrontColor" :loading="nbLoading" :front-color="nbFrontColor"
			:background-color="nbBackgroundColor" />
	</page-meta>
	<view class="">
		<view class="body">
			<image class="orgimg" :src="banner.payUrl">

			</image>
			<view class="payName">
				{{banner.payName}}
			</view>
			<view class="money">
				&yen;{{banner.payMoney}}
			</view>
		</view>
		<view class="body">
			<view class="payDetailTitle">
				商品详情

				<text class="countdown" v-show="banner.payType==2&&moneyType==1">

					<text id="second">{{Areaseconds}}</text>
					<text id="minute">{{Areaminutes}}</text>
					<text id="hour">{{Areahours}}</text>
					<text id="day">{{day}}</text>

				</text>
				<text style="float: right;" v-show="banner.payType==2&&  moneyType==1">截止倒计时</text>

			</view>
			<view class="payDetail">
				<mp-html :content="banner.payContent"></mp-html>
			</view>
		</view>
		<view class="">
			<uni-fixed-bottom paddingTop="50">
				<view slot="fixed_bottom">
					<view class="bottom">
						总额<text class="bottom_money">{{banner.payMoney}}</text>
						<button type="warn" class="btn" v-show="moneyStatus==0" @click="settle">去结算</button>
						<text v-show="moneyStatus==1" class="btn line-red" style="font-size: 30rpx;">已缴费</text>
					</view>

				</view>
			</uni-fixed-bottom>
		</view>
	</view>


</template>

<script>
	import {
		Areacountdown
	} from '@/api/arrcountdown.js' //引入
	import {
		edit
	} from "@/api/pd/pd.js"
	export default {
		data() {
			return {
				imgWidth: '',
				imgHeight: '',
				banner: [],
				nbLoading: false,
				// nbTitle: "缴费详情",
				nbFrontColor: '#000000',
				nbBackgroundColor: '#f7cb50',
				//封装的倒计时需要的
				Areahours: 0, //时
				Areaminutes: 0, //分
				Areaseconds: 0, //秒
				day: 0,
				moneyStatus: undefined,
				moneyType: -1
			};
		},
		onLoad(option) {

			const item = JSON.parse(decodeURIComponent(option.item));
			this.moneyStatus = JSON.parse(decodeURIComponent(option.status));;
			this.moneyType = JSON.parse(decodeURIComponent(option.type));
			if (item.payUrl == null) {
				item.payUrl = "/static/images/notFond.jpg"
			}
			this.banner = item;
			//详情标题
			uni.setNavigationBarTitle({
				title: this.banner.payName
			});
			if (this.banner.payType == 2) {
				this.countDown()
			}

		},
		methods: {
			countDown() {
				var date = new Date(this.banner.endTime)
				var time = date.valueOf();
				Areacountdown(time, this)
					.then(res => {
						// console.log('结束')
					})
			},
			settle() {
				edit(this.banner.payId).then((res) => {
					this.moneyStatus = 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {
		background-color: #ffffff;
		margin-bottom: 20rpx;

		.orgimg {

			width: 100%;
			height: 500rpx;
		}

		.payName {
			padding: 20rpx;
			// font-weight: bold;
			font-size: 30rpx;
			background-color: #ffffff;
			border-bottom: 1px solid #f1f1f1;
		}

		.money {
			padding: 20rpx;
			font-size: 25rpx;
			color: #ed5b3f;
		}

		.payDetailTitle {
			color: #696969;
			padding: 20rpx;
			border-bottom: 1px solid #f1f1f1;
		}

		.payDetail {
			padding: 20rpx;
			font-size: 30rpx;
			text-indent: 2em;
		}
	}

	.bottom {
		width: 100%;
		display: inline-block;
		padding-left: 20rpx;
		height: 50rpx;

		.bottom_money {

			padding-left: 20rpx;
			color: red;
		}
	}

	.btn {
		width: 150rpx;
		height: 50rpx;
		float: right;
		margin-right: 50rpx;
		font-size: 20rpx;
		text-align: center;
		display: inline-block;
	}

	.container {
		// margin: 0;
		// color: #fff;
		// line-height: normal;
		// align-items: center;
	}

	.countdown text {
		float: right;
		margin-left: 10rpx;
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 15px;
		text-align: center;
		background: #333333;
		color: #ffffff;
		font-weight: 500;
		border-radius: 5px;
	}

	// .countdown view:before {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: -30px;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 30px;
	// 	background: #b00000;
	// 	color: #ffffff;
	// 	font-size: 0.4em;
	// 	line-height: 35px;
	// 	font-weight: 300;
	// 	border-radius: 0 0 10px 10px;
	// }

	// .countdown #day:before {
	// 	content: '天';
	// }

	// .countdown #hour:before {
	// 	content: '时';
	// }

	// .countdown #minute:before {
	// 	content: '分';
	// }

	// .countdown #second:before {
	// 	content: '秒';
	// }
</style>
